<!DOCTYPE html>
<html>
<head>
    <title>走势图</title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div>
    <canvas id="myChart1"></canvas>
</div>

<div>
    <canvas id="myChart2"></canvas>
</div>

<div>
    <canvas id="myChart3"></canvas>
</div>

<div>
    <canvas id="myChart4"></canvas>
</div>

<div>
    <canvas id="myChart5"></canvas>
</div>

<div>
    <canvas id="myChart6"></canvas>
</div>

<div>
    <canvas id="myChart7"></canvas>
</div>


<script>
    // 获取后端接口数据
    fetch('/test/queryTcListFromRemote')
        .then(response => response.json())
        .then(data => {
            // 提取数据
            const dataValue = data.data
            const labels = dataValue.map(item => item.id);
            const values = dataValue.map(item => item.one);
            const values2 = dataValue.map(item => item.two);
            const values3 = dataValue.map(item => item.three);
            const values4 = dataValue.map(item => item.four);
            const values5 = dataValue.map(item => item.five);
            const values6 = dataValue.map(item => item.six);
            const values7 = dataValue.map(item => item.seven);
            console.log("labels " + labels)
            console.log("values " + values)
            // 创建走势图
            const ctx1 = document.getElementById('myChart1').getContext('2d');
            new Chart(ctx1, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'one',
                        data: values,
                        backgroundColor: 'rgba(0, 123, 255, 0.5)',
                        borderColor: 'rgba(0, 123, 255, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            const ctx2 = document.getElementById('myChart2').getContext('2d');
            new Chart(ctx2, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'two',
                        data: values2,
                        backgroundColor: 'rgba(0, 123, 255, 0.5)',
                        borderColor: 'rgba(0, 123, 255, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            const ctx3 = document.getElementById('myChart3').getContext('2d');
            new Chart(ctx3, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'two',
                        data: values3,
                        backgroundColor: 'rgba(0, 123, 255, 0.5)',
                        borderColor: 'rgba(0, 123, 255, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            const ctx4 = document.getElementById('myChart4').getContext('2d');
            new Chart(ctx4, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'four',
                        data: values4,
                        backgroundColor: 'rgba(0, 123, 255, 0.5)',
                        borderColor: 'rgba(0, 123, 255, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            const ctx5 = document.getElementById('myChart5').getContext('2d');
            new Chart(ctx5, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'five',
                        data: values5,
                        backgroundColor: 'rgba(0, 123, 255, 0.5)',
                        borderColor: 'rgba(0, 123, 255, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            const ctx6 = document.getElementById('myChart6').getContext('2d');
            new Chart(ctx6, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'six',
                        data: values6,
                        backgroundColor: 'rgba(0, 123, 255, 0.5)',
                        borderColor: 'rgba(0, 123, 255, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            const ctx7 = document.getElementById('myChart7').getContext('2d');
            new Chart(ctx7, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'seven',
                        data: values7,
                        backgroundColor: 'rgba(255,0,59,0.5)',
                        borderColor: 'rgb(255,0,0)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

        })
        .catch(error => {
            console.error('发生错误:', error);
        });
</script>
</body>
</html>